<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>岚山一中一卡通</title>
    <link rel="stylesheet" href="/css/weui.min.css"/>
    <link rel="stylesheet" href="/css/myWxmp.css"/>
</head>
<body ontouchstart>
<div class="container" id="container">
    <div class="page js_show">
        <div class="page__hd">
            <h1 class="page__title">饭卡充值</h1>
            <p class="page__desc">充值前请仔细核对余额、持卡人信息</p>
        </div>
        <div class="page__bd">
            <div class="weui-form-preview">
                <div class="weui-form-preview__hd">
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">卡内余额</label>
                        <em class="weui-form-preview__value" id="usableAmount"></em>
                    </div>
                </div>
                <div class="weui-form-preview__bd">
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">卡号</label>
                        <span class="weui-form-preview__value" id="cardNo"></span>
                    </div>
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">持卡人</label>
                        <span class="weui-form-preview__value" id="cardOwner"></span>
                    </div>
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">消费详情</label>
                        <span class="weui-form-preview__value"><a href="payList.html">查看消费记录</a></span>
                    </div>
                </div>
            </div>
            <br/>
            <div class="weui-form-preview">
                <div class="weui-form-preview__hd">
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">充值</label>
                    </div>
                </div>
                <div class="weui-grids">
                    <a href="javascript:recharge(5000);" class="weui-grid">
                        <div class="weui-grid__icon">
                            <img src="/images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">50</p>
                    </a>
                    <a href="javascript:recharge(10000);" class="weui-grid">
                        <div class="weui-grid__icon">
                            <img src="/images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">100</p>
                    </a>
                    <a href="javascript:recharge(20000);" class="weui-grid">
                        <div class="weui-grid__icon">
                            <img src="/images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">200</p>
                    </a>
                    <a href="javascript:recharge(30000);" class="weui-grid">
                        <div class="weui-grid__icon">
                            <img src="/images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">300</p>
                    </a>
                    <a href="javascript:recharge(50000);" class="weui-grid">
                        <div class="weui-grid__icon">
                            <img src="/images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">500</p>
                    </a>
                    <a href="javascript:recharge(100000);" class="weui-grid">
                        <div class="weui-grid__icon">
                            <img src="/images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">1000</p>
                    </a>
                </div>
                <div class="weui-form-preview__bd">
                    <div class="weui-form-preview__item">
                        <label class="weui-form-preview__label">充值详情</label>
                        <span class="weui-form-preview__value"><a href="rechargeList.html">查看充值记录</a></span>
                    </div>
                </div>
            </div>
<!--            <br/>
            <div class="weui-btn-area">
                <a href="javascript:;" class="weui-btn weui-btn_primary" id="confirm_recharge">确认</a>
            </div>-->
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__text">Copyright &copy; 2018-2019</p>
            </div>
        </div>
    </div>

</div>


<script src="/js/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script type="text/javascript">

    function recharge(amount){
        window.location.href = '/wxpay/createOrder?amount='+amount;
    }

    function getCurrentCardInfo() {
        $.ajax({
            url: '/wxpay/getCardInfo',
            type: "GET",
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    var cardAccountInfo = result.data;
                    $("#usableAmount").html(cardAccountInfo.usableAmount+"元");
                    $("#cardNo").html(cardAccountInfo.cardNo);
                    $("#cardOwner").html(cardAccountInfo.cardOwner);
                }else{
                    showFailure(result.msg)
                }
            }
        });
    }
    
    function showFailure(msg){
        window.location.href='failure.html?failTip='+encodeURIComponent(msg);
    }

    getCurrentCardInfo();
</script>
</body>
</html>
